<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单次课详情</title>
    <link rel="stylesheet" href="../../Public/css/mui.min.css">
    <link rel="stylesheet" href="../../Public/fonts/iconfont.css">
    <link rel="stylesheet" href="../../Public/css/global.css">
    <link rel="stylesheet" href="../css/course_index.css">
</head>
<body>
<div class="mui-content set-detail-content">
    <div class="detail-top bg-whtie">
        <img src="http://img5.imgtn.bdimg.com/it/u=3549496778,2425390027&fm=200&gp=0.jpg" alt="">
        <div class="detail-text">
            <p class="text-16 mui-ellipsis-2 color-333">瘦身大咖仅一字教你3个月瘦成一道闪电</p>
            <p class="text-14 m-t-sm">时间：<span class="color-main">2017.10.10 10:00:00 </span></p>
            <p class="text-mini m-t-sm"><i class="iconfont icon-icon"></i> 4000人次</p>
        </div>
    </div>
    <div>
        <a class="statis" href="statis_onecedetail.html">
            <span><i class="iconfont icon-tongjifenxi"></i></span>
            <div>数据统计</div>
        </a>
    </div>
    <div class="tab-wrap bg-whtie m-t">
        <ul class="tab-nav clearfix text-16">
            <li class="tn-active">直播简介</li>
            <li>课程咨询</li>
        </ul>
        <div class="tab-content tc-active live-intro">
            <div class="intro-p">
                <p class="color-666 text-15">主讲人：刘主编</p>
                <p class="color-999">这段演讲到现在已经是最后一次了，其实我刚刚在问的时候就发现了：我们大部分人都不是出身豪门的，我们都要靠自己！所以你要相信：命运给你一个比别人低的起点是想告诉你，让你用你的一生去奋斗出一个绝地反击的故事。这个故事关于独立、关于梦想、关于勇气、关于坚忍，它不是一个水到渠成的童话，没有一点点人间疾苦，这个故事是有志者事竟成，破釜沉舟，百二秦关终属楚，这个故事是苦心人天不负，卧薪尝胆，三千越甲可吞吴!</p>
                <p class="color-666 text-15">直播概要：</p>
                <p class="color-999">这段演讲到现在已经是最后一次了，其实我刚刚在问的时候就发现了：我们大部分人都不是出身豪门的，我们都要靠自己！所以你要相信：釜沉舟，百二秦关终属楚，这个故事是苦心人天不负，卧薪尝胆，三千越甲可吞吴!</p>
            </div>
            <a href="##" class="belong-set mui-navigate-right bg-whtie m-t text-14 mui-ellipsis">
                <span class="color-999 m-r-sm">所属系列课</span>我是系列课名称
            </a>
            <div class="m-t liveroom-intro bg-whtie">
                <p class="s_top">直播教室 <a href="#" class="color-main" title=""> 直播课堂他课</a>
                <a href="#" class="follow-btn2 m-l-sm" title="">加关注</a></p>
                <ul class="clearfix color-999 text-mini">
                    <li class="s_line"><span>85</span>课程数</li>
                    <li class="s_line"><span>85</span>关注人数</li>
                    <li class="li-renzheng"><i class="iconfont icon-renzheng m-r color-yellow"></i>官方认证</li>
                </ul>
            </div>
            <h5 class="rec-top rel m-t">
                <a href="#" class="text-15 mui-navigate-right mui-block color-333">更多直播</a>
            </h5>
            <div class="course-list">
                <ul class="mui-table-view hot-cell">
                    <li class="mui-table-view-cell mui-media">
                        <a href="#">
                            <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                            <div class="mui-media-body">
                                <p class="mui-ellipsis-2 text-14 color-333">
                                    <span class="shipin-icon"><i class="iconfont icon-sdiantai"></i>音频</span>
                                    匀变速直线运动的速度与时间的关系·基础知识4条
                                </p>
                                <p class="color-999 m-t-md">
                                    <span class="color-red text-mini"><i class="iconfont icon-shizhong color-red"></i> 两天后</span>
                                    <span class="color-999 text-mini">12.2w人次学习</span>
                                    <span class="color-red mui-pull-right text-13">￥21.60</span>
                                </p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="" title="">
                            <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                            <div class="mui-media-body">
                                <p class="mui-ellipsis-2 text-14 color-333">
                                    匀变速直线运动的速度与时间的关系·基础知识4条
                                </p>
                                <p class="color-999 m-t-md">
                                    <span class="jinxing text-mini">&bull; 进行中</span>
                                    <span class="color-999 text-mini">12.2w人次学习</span>
                                    <span class="color-green mui-pull-right text-13">免费</span>
                                </p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="" title="">
                            <img class="mui-pull-left mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=2129473072,572477714&fm=200&gp=0.jpg">
                            <div class="mui-media-body">
                                <p class="mui-ellipsis-2 text-14 color-333">
                                    <span class="shipin-icon"><i class="iconfont icon-shipin"></i>视频</span>匀变速直线运动的速度与时间的关系·基础知识4条
                                </p>
                                <p class="color-999 text-mini m-t-sm">2017-20-20 8:00</p>
                                <p>
                                    <span class="color-999 text-mini">12.2w人次学习</span>
                                    <span class="color-green mui-pull-right text-13">免费</span>
                                </p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <ul class="mui-table-view zixun-ul">
                <li class="mui-table-view-cell mui-media clearfix">
                    <a href="#" title="" class="mui-pull-left"><img class="mui-media-object mui-pull-left" src="http://img0.imgtn.bdimg.com/it/u=3637404049,2821183587&fm=27&gp=0.jpg"></a>
                    <div class="mui-media-body">
                        <a href="#" title=""><p class="text-15 color-666 m-t-sm">我是昵称</p></a>
                        <p class="color-999 m-t-3 text-mini">一个月前</p>
                        <p class="color-333 m-t m-b">听课可以停多久，能重复听么？</p>
                        <div class="replay">
                            <p class="color-666 name">直播教室回复<span class="text-mini color-999">一个月前</span></p>
                            <p class="color-333 m-t">您好，是一次购买，永久回访</p>
                        </div>
                    </div>
                    <p class="color-666 r-pos">1 <i class="iconfont icon-dianzan"></i></p>
                </li>
            </ul>
            <form action="#" method="get" class="zixun-form m-t-md mui-text-center" accept-charset="utf-8">
                <textarea name="kechengzixun" placeholder="输入想咨询的问题，我们将尽快给您答复"></textarea>
                <button type="submit" class="mui-btn mui-btn-main mui-btn-outlined">提交</button>
            </form>
        </div>
    </div>
</div>
<div class="mui-bar mui-bar-tab mui-live-tab single-detail-bottom">
    <a href="onece_edit.html" title="" class="faqizhibo"><span class="iconfont icon-bianji"> </span> 编辑介绍页</a>
    <a href="live_pic.html"class="buy bg-main">进入直播</a>
</div>
</body>
<script src="../../Public/libs/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="../../Public/libs/mui.min.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $('.tab-nav li').on('click',function(){
            var $this = $(this);
            if($this.hasClass('tn-active')){
                return false;
            }else{
                var ind = $this.index();
                $this.siblings('li').removeClass('tn-active');
                $this.addClass('tn-active');
                $('.tab-content').removeClass('tc-active').eq(ind).addClass('tc-active');
            }
        })
    })
</script>
</html>
